<template>
	<view class="article-item">
		<view class="main">
			<image class="img" src="https://pic.ibaotu.com/00/10/95/273888piChAq.jpg-0.jpg!ww7002" />
			<view class="con">
				<text class="title">{{item.title}}</text>
				<text class="major">{{item.major}}</text>
				<view class="vote">
					<text class="name">投票</text>
					<text class="number">123</text>
				</view>
			</view>
			<view class="btn" @click="vote">
				投票
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					id:1,
					img:"",
					title:"两只老虎",
					major:"高臣高臣超高高臣高臣超高高臣高臣超高 高臣高臣超高高臣"
				}
			};
		},
		methods:{
			vote(){
				
			}
		}
	}
</script>

<style lang="stylus">
	.article-item
		width 100%
		.main
			position relative
			display flex
			box-shadow:0upx 16upx 18upx 3upx rgba(0, 0, 0, 0.05);
			border-radius:20upx;
			padding 20upx 33upx 40upx
			.btn
				display flex
				align-items center
				justify-content center
				position absolute
				width:138upx;
				height:44upx;
				background:rgba(0,156,78,1);
				box-shadow:0upx 16upx 18upx 3upx rgba(0,156,78,0.22);
				border-radius:20upx;
				color #FFFFFF
				font-size 22upx
				right 40upx
				bottom 28upx
			.img
				width:194upx;
				height:220upx;
				border-radius 20upx
				margin-right 36upx
			.con
				display flex
				flex-direction column
				justify-content space-between
				padding 23upx 0 
				.title
					color #55545D
					font-size 32upx
				.major
					font-size 20upx
					color #B9B7C0
					line-height 30upx
				.vote
					.name
						color #55545D
						font-size 22upx
						margin-right 14upx
					.number
						color #598EFE
						font-size 22upx

</style>
